<!DOCTYPE html>
<html>
<head data-suburl="">
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	
		<meta name="author" content="diogo" />
		<meta name="description" content="gnu-social - GNU social is a social communication software used in federated social networks. It is widely supported and has a large userbase. It is already used by the Free Software Foundation." />
		<meta name="keywords" content="go, git, self-hosted, gogs">
	
	<meta name="referrer" content="no-referrer" />
	<meta name="_csrf" content="wLUmNXiGSzdSOdGtrCGBPHcszoE6MTYwNDc5MjM3NjIwNTU4NDM4NA==" />
	<meta name="_suburl" content="" />
	
	
	
		<meta property="og:url" content="https://notabug.org/diogo/gnu-social" />
		<meta property="og:type" content="object" />
		<meta property="og:title" content="diogo/gnu-social">
		<meta property="og:description" content="GNU social is a social communication software used in federated social networks. It is widely supported and has a large userbase. It is already used by the Free Software Foundation.">
		<meta property="og:image" content="https://notabug.org/avatars/12290" />
	

	<link rel="shortcut icon" href="/img/favicon.png" />

	<script src="/js/jquery-1.11.3.min.js"></script>
	<script src="/js/libs/jquery.are-you-sure.js"></script>
        <link href="/img/icon-48.ico" rel="icon" type="image/x-icon" />
        <link href="/img/icon-60.png" rel="apple-touch-icon">
        <link href="/img/icon-76.png" rel="apple-touch-icon" sizes="76x76">
        <link href="/img/icon-120.png" rel="apple-touch-icon" sizes="120x120">
        <link href="/img/icon-152.png" rel="apple-touch-icon" sizes="152x152">
        <link href="/img/icon-240.png" rel="apple-touch-icon" sizes="240x240">

	<link rel="stylesheet" href="/assets/font-awesome-4.6.3/css/font-awesome.min.css">
	<link rel="stylesheet" href="/assets/octicons-4.3.0/octicons.min.css">

	
	

	

	
	<link rel="stylesheet" href="/css/semantic-2.2.13.min.css">
	<link rel="stylesheet" href="/css/gogs.css?v=6fc9e85aa88133794d3434ea74aa557a">
	<link rel="stylesheet" href="/css/notabug.css">

	
	<script src="/js/semantic-2.2.13.min.js"></script>
	<script src="/js/gogs.js?v=6fc9e85aa88133794d3434ea74aa557a"></script>

	<title>Site: Progressive Web Application API &amp; Service Workers - NotABug.org: Free code hosting</title>

	<meta name="theme-color" content="#428bca">

	


<noscript><style>.nojs-popup:hover > .menu { display: block ; }</style></noscript>


</head>
<body>
	<div class="full height">
		<noscript>Please enable JavaScript in your browser!</noscript>

		
			<div id="header-div" class="following bar light">
				<div class="ui container">
					<div class="ui grid">
						<div class="column">
							<div class="ui top secondary menu">
								<a class="item brand" href="/">
									<img class="ui mini image" src="/img/favicon.png">
								</a>

								
									<a class="item" href="/">Home</a>
								

								<a class="item" href="/explore/repos">Explore</a>
								

								



									<a class="notabug-item item" href="/help" rel="noreferrer">Help</a>




									<div class="right menu">
										
											<a class="item" href="/user/sign_up">
												<i class="octicon octicon-person"></i> Register
											</a>
										
										<a class="item" href="/user/login?redirect_to=%2fdiogo%2fgnu-social%2fissues%2f211">
											<i class="octicon octicon-sign-in"></i> Sign In
										</a>
									</div>

								
							</div>
						</div>
					</div>
				</div>
			</div>
		


<div class="repository view issue pull">
	<div class="header-wrapper">

	<div class="ui container">
		<div class="ui vertically padded grid head">
			<div class="column">
				<div class="ui header">
					<div class="ui huge breadcrumb">
						<i class="mega-octicon octicon-repo"></i>
						<a href="/diogo">diogo</a>
						<div class="divider"> / </div>
						<a href="/diogo/gnu-social">gnu-social</a>
						
						
					</div>

					
						<div class="ui right">
							<div class="ui labeled button" tabindex="0">
								<a class="ui basic button" href="/diogo/gnu-social/action/watch?redirect_to=%2fdiogo%2fgnu-social%2fissues%2f211">
									<i class="icon fa-eye-slash"></i>Watch
								</a>
								<a class="ui basic label" href="/diogo/gnu-social/watchers">
									9
								</a>
							</div>
							<div class="ui labeled button" tabindex="0">
								<a class="ui basic button" href="/diogo/gnu-social/action/star?redirect_to=%2fdiogo%2fgnu-social%2fissues%2f211">
									<i class="icon fa-star-o"></i>Star
								</a>
								<a class="ui basic label" href="/diogo/gnu-social/stars">
									22
								</a>
							</div>
							
								<div class="ui labeled button" tabindex="0">
									<a class="ui basic button " href="/repo/fork/25974">
										<i class="octicon octicon-repo-forked"></i>Fork
									</a>
									<a class="ui basic label" href="/diogo/gnu-social/forks">
										21
									</a>
								</div>
							
						</div>
					
				</div>
			</div>
		</div>
	</div>


	<div class="ui tabs container">
		<div class="ui tabular menu navbar">
			
				<a class=" item" href="/diogo/gnu-social">
					<i class="octicon octicon-file-text"></i> Files
				</a>
			
			
				<a class="active item" href="/diogo/gnu-social/issues">
					<i class="octicon octicon-issue-opened"></i> Issues <span class="ui blue small label">73</span>
				</a>
			
			
				<a class=" item" href="/diogo/gnu-social/pulls">
					<i class="octicon octicon-git-pull-request"></i> Pull Requests <span class="ui blue small label">3</span>
				</a>
			
			
				<a class=" item" href="/diogo/gnu-social/wiki">
					<i class="octicon octicon-book"></i> Wiki
				</a>
			
			
		</div>
	</div>
	<div class="ui tabs divider"></div>

</div>

	<div class="ui container">
		<div class="navbar">
			<div class="ui compact small menu">
	<a class=" item" href="/diogo/gnu-social/labels">Labels</a>
	<a class=" item" href="/diogo/gnu-social/milestones">Milestones</a>
</div>

			<div class="ui right">
				
					<a class="ui green button" href="/diogo/gnu-social/issues/new">New Issue</a>
				
			</div>
		</div>
		<div class="ui divider"></div>
		
			<div>
				<div class="ui grid">
	
	
		<div class="sixteen wide column title">
	<div class="ui grid">
		<h1 class="twelve wide column">
			<span class="index">#211</span> <span id="issue-title" class="has-emoji">Site: Progressive Web Application API &amp; Service Workers</span>
			<div id="edit-title-input" class="ui input" style="display: none">
				<input value="Site: Progressive Web Application API &amp; Service Workers">
			</div>
		</h1>
		
	</div>
	
		<div class="ui green large label"><i class="octicon octicon-issue-opened"></i> Open</div>
	

	
		
		<span class="time-desc">
			
				opened <span class="time-since" title="Tue, 29 Sep 2020 16:25:43 UTC">1 month ago</span> by <a href="/thndrbvr">thndrbvr</a>
			
			·
			0 comments
		</span>
	
	<div class="ui divider"></div>
</div>

	

	
	<div class="twelve wide column comment-list">
		<ui class="ui comments">
			<div class="comment">
				<a class="avatar" href="/thndrbvr">
					<img src="/avatars/43539">
				</a>
				<div class="content">
					<div class="ui top attached header">
						<span class="text grey"><a href="/thndrbvr">Thunder Beaver</a> commented <a href="#issue-65731"><span class="time-since" title="Tue, 29 Sep 2020 16:25:43 UTC">1 month ago</span></a></span>
						<div class="ui right actions">
							
						</div>
					</div>
					<div class="ui attached segment">
						<div class="render-content markdown has-emoji">
							
								<p>Copy &amp; Paste from <a href="https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Introduction#Advantages_of_web_applications" rel="nofollow">MDN</a>:</p>

<p>There are some key principles a web app should try to observe to be identified as a PWA. It should be:</p>

<p><b>Discoverable</b>, so the contents can be found through search engines.<br/>
<b>Installable</b>, so it can be available on the device&#39;s home screen or app launcher.<br/>
<b>Linkable</b>, so you can share it by simply sending a URL.<br/>
<b>Network independent</b>, so it works offline or with a poor network connection.<br/>
<b>Progressive</b>, so it&#39;s still usable on a basic level on older browsers, but fully-functional on the latest ones.<br/>
<b>Re-engageable</b>, so it&#39;s able to send notifications whenever there&#39;s new content available.<br/>
<b>Responsive</b>, so it&#39;s usable on any device with a screen and a browser—mobile phones, tablets, laptops, TVs, refrigerators, etc.<br/>
<b>Safe</b>, so the connections between the user, the app, and your server are secured against any third parties trying to get access to sensitive data.</p>

<p>Offering these features and making use of all the advantages offered by web applications can create a compelling, highly flexible offering for your users.</p>

<hr>

<p>Each instance could have it&#39;s own PWA. This may seem a little fragmented but, I doubt many regular folk will notice at first. The site they&#39;re on will seem more professional, complete, and modern which gives GS the edge and makes it more competitive so people have more reason to #deletefacebook. The application icon will sit silently luring them to participate in the fediverse.</p>

<p>Maybe it&#39;d be possible to have on PWA that has an easy way to log in to any given site Os/AP site? And be launched multiple times for people with multiple accounts. Unsure if that&#39;s better or worse. &amp;S, Fedilab, Choqok or other proper desktop/mobile applications are possibly better suited for this despite not sharing the instances theme.</p>

<p>However, desktop applications need development help, package maintainers, and I imagine some UX/UI help. (i.e. A &#34;new&#34; version of Choqok was released several months ago and nobody has updated the Ubuntu PPA and I can&#39;t get it to build properly from source. The old one functions and is Qt5.)</p>

<p>A PWA would reduce the need for these other applications and each instance could have it&#39;s own official app that the user&#39;s browser prompts them to install.</p>

<p>Related: <a href="/diogo/gnu-social/issues/202" rel="nofollow">#202</a></p>

							
						</div>
						<div class="raw-content hide">Copy &amp; Paste from &lt;a href=&#34;https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Introduction#Advantages_of_web_applications&#34;&gt;MDN&lt;/a&gt;:

There are some key principles a web app should try to observe to be identified as a PWA. It should be:

&lt;b&gt;Discoverable&lt;/b&gt;, so the contents can be found through search engines.&lt;br /&gt;
&lt;b&gt;Installable&lt;/b&gt;, so it can be available on the device&#39;s home screen or app launcher.&lt;br /&gt;
&lt;b&gt;Linkable&lt;/b&gt;, so you can share it by simply sending a URL.&lt;br /&gt;
&lt;b&gt;Network independent&lt;/b&gt;, so it works offline or with a poor network connection.&lt;br /&gt;
&lt;b&gt;Progressive&lt;/b&gt;, so it&#39;s still usable on a basic level on older browsers, but fully-functional on the latest ones.&lt;br /&gt;
&lt;b&gt;Re-engageable&lt;/b&gt;, so it&#39;s able to send notifications whenever there&#39;s new content available.&lt;br /&gt;
&lt;b&gt;Responsive&lt;/b&gt;, so it&#39;s usable on any device with a screen and a browser—mobile phones, tablets, laptops, TVs, refrigerators, etc.&lt;br /&gt;
&lt;b&gt;Safe&lt;/b&gt;, so the connections between the user, the app, and your server are secured against any third parties trying to get access to sensitive data.

Offering these features and making use of all the advantages offered by web applications can create a compelling, highly flexible offering for your users.

&lt;hr&gt;

Each instance could have it&#39;s own PWA. This may seem a little fragmented but, I doubt many regular folk will notice at first. The site they&#39;re on will seem more professional, complete, and modern which gives GS the edge and makes it more competitive so people have more reason to #deletefacebook. The application icon will sit silently luring them to participate in the fediverse.

Maybe it&#39;d be possible to have on PWA that has an easy way to log in to any given site Os/AP site? And be launched multiple times for people with multiple accounts. Unsure if that&#39;s better or worse. &amp;S, Fedilab, Choqok or other proper desktop/mobile applications are possibly better suited for this despite not sharing the instances theme. 

However, desktop applications need development help, package maintainers, and I imagine some UX/UI help. (i.e. A &#34;new&#34; version of Choqok was released several months ago and nobody has updated the Ubuntu PPA and I can&#39;t get it to build properly from source. The old one functions and is Qt5.)

A PWA would reduce the need for these other applications and each instance could have it&#39;s own official app that the user&#39;s browser prompts them to install.



Related: #202</div>
						<div class="edit-content-zone hide" data-write="issue-65731-write" data-preview="issue-65731-preview" data-update-url="/diogo/gnu-social/issues/211/content" data-context="/diogo/gnu-social"></div>
					</div>
					
				</div>
			</div>

			

			

			
				<div class="ui warning message">
					<a href="/user/login?redirect_to=/diogo/gnu-social/issues/211">Sign in</a> to join this conversation.
				</div>
			
		</ui>
	</div>

	<div class="four wide column">
		<div class="ui segment metas">
			<div class="ui disabled floating jump select-label dropdown">
				<span class="text">
					<strong>Labels</strong>
					<span class="octicon octicon-gear"></span>
				</span>
				<div class="filter menu" data-action="update" data-update-url="/diogo/gnu-social/issues/211/label">
					<div class="no-select item">Clear labels</div>
					
						<a class=" item" href="#" data-id="1564" data-id-selector="#label_1564"><span class="octicon "></span><span class="label color" style="background-color: #fbca04"></span> bounty</a>
					
						<a class=" item" href="#" data-id="1483" data-id-selector="#label_1483"><span class="octicon "></span><span class="label color" style="background-color: #ee0701"></span> bug</a>
					
						<a class=" item" href="#" data-id="1484" data-id-selector="#label_1484"><span class="octicon "></span><span class="label color" style="background-color: #cccccc"></span> duplicate</a>
					
						<a class=" item" href="#" data-id="1485" data-id-selector="#label_1485"><span class="octicon "></span><span class="label color" style="background-color: #84b6eb"></span> enhancement</a>
					
						<a class=" item" href="#" data-id="1486" data-id-selector="#label_1486"><span class="octicon "></span><span class="label color" style="background-color: #128a0c"></span> help wanted</a>
					
						<a class=" item" href="#" data-id="1487" data-id-selector="#label_1487"><span class="octicon "></span><span class="label color" style="background-color: #e6e6e6"></span> invalid</a>
					
						<a class=" item" href="#" data-id="1488" data-id-selector="#label_1488"><span class="octicon "></span><span class="label color" style="background-color: #cc317c"></span> question</a>
					
						<a class=" item" href="#" data-id="1565" data-id-selector="#label_1565"><span class="octicon "></span><span class="label color" style="background-color: #d4c5f9"></span> RFC</a>
					
						<a class=" item" href="#" data-id="1841" data-id-selector="#label_1841"><span class="octicon "></span><span class="label color" style="background-color: #0052cc"></span> v3</a>
					
						<a class=" item" href="#" data-id="1489" data-id-selector="#label_1489"><span class="octicon "></span><span class="label color" style="background-color: #ffffff"></span> wontfix</a>
					
				</div>
			</div>
			<div class="ui labels list">
				<span class="no-select item ">No Label</span>
				
					<div class="item">
						<a class="ui label hide" id="label_1564" href="/diogo/gnu-social/issues?labels=1564" style="color: #000; background-color: #fbca04">bounty</a>
					</div>

				
					<div class="item">
						<a class="ui label hide" id="label_1483" href="/diogo/gnu-social/issues?labels=1483" style="color: #fff; background-color: #ee0701">bug</a>
					</div>

				
					<div class="item">
						<a class="ui label hide" id="label_1484" href="/diogo/gnu-social/issues?labels=1484" style="color: #000; background-color: #cccccc">duplicate</a>
					</div>

				
					<div class="item">
						<a class="ui label hide" id="label_1485" href="/diogo/gnu-social/issues?labels=1485" style="color: #000; background-color: #84b6eb">enhancement</a>
					</div>

				
					<div class="item">
						<a class="ui label hide" id="label_1486" href="/diogo/gnu-social/issues?labels=1486" style="color: #fff; background-color: #128a0c">help wanted</a>
					</div>

				
					<div class="item">
						<a class="ui label hide" id="label_1487" href="/diogo/gnu-social/issues?labels=1487" style="color: #000; background-color: #e6e6e6">invalid</a>
					</div>

				
					<div class="item">
						<a class="ui label hide" id="label_1488" href="/diogo/gnu-social/issues?labels=1488" style="color: #fff; background-color: #cc317c">question</a>
					</div>

				
					<div class="item">
						<a class="ui label hide" id="label_1565" href="/diogo/gnu-social/issues?labels=1565" style="color: #000; background-color: #d4c5f9">RFC</a>
					</div>

				
					<div class="item">
						<a class="ui label hide" id="label_1841" href="/diogo/gnu-social/issues?labels=1841" style="color: #fff; background-color: #0052cc">v3</a>
					</div>

				
					<div class="item">
						<a class="ui label hide" id="label_1489" href="/diogo/gnu-social/issues?labels=1489" style="color: #000; background-color: #ffffff">wontfix</a>
					</div>

				
			</div>

			<div class="ui divider"></div>

			<div class="ui disabled floating jump select-milestone dropdown">
				<span class="text">
					<strong>Milestone</strong>
					<span class="octicon octicon-gear"></span>
				</span>
				<div class="menu" data-action="update" data-update-url="/diogo/gnu-social/issues/211/milestone">
					<div class="no-select item">Clear milestone</div>
					
					
				</div>
			</div>
			<div class="ui select-milestone list">
				<span class="no-select item ">No Milestone</span>
				<div class="selected">
					
				</div>
			</div>

			<div class="ui divider"></div>

			<input id="assignee_id" name="assignee_id" type="hidden" value="">
			<div class="ui disabled floating jump select-assignee dropdown">
				<span class="text">
					<strong>Assignee</strong>
					<span class="octicon octicon-gear"></span>
				</span>
				<div class="menu" data-action="update" data-update-url="/diogo/gnu-social/issues/211/assignee">
					<div class="no-select item">Clear assignee</div>
					
				</div>
			</div>
			<div class="ui select-assignee list">
				<span class="no-select item ">No assignee</span>
				<div class="selected">
					
				</div>
			</div>

			<div class="ui divider"></div>

			<div class="ui participants">
				<span class="text"><strong>1 Participants</strong></span>
				<div>
					
						<a href="/thndrbvr">
							<img class="ui avatar image poping up" src="/avatars/43539" data-content="Thunder Beaver" data-position="top center" data-variation="small inverted">
						</a>
					
				</div>
			</div>
		</div>
	</div>
</div>

<div class="hide" id="edit-content-form">
	<div class="ui comment form">
		<div class="ui top attached tabular menu">
			<a class="active write item">Write</a>
			<a class="preview item" data-url="/api/v1/markdown" data-context="/diogo/gnu-social">Preview</a>
		</div>
		<div class="ui bottom attached active write tab segment">
			<textarea tabindex="1" id="content" name="content"></textarea>
		</div>
		<div class="ui bottom attached tab preview segment markdown">
			Loading...
		</div>
		<div class="text right edit buttons">
			<div class="ui basic blue cancel button" tabindex="3">Cancel</div>
			<div class="ui green save button" tabindex="2">Save</div>
		</div>
	</div>
</div>

<div class="hide" id="no-content">
	<span class="no-content">There is no content yet.</span>
</div>

			</div>
		
	</div>
</div>

	</div>
	<footer>
		<div class="ui container">
			<div class="ui left">



				<a href="/tos">Terms of Service</a>
				&bull;
				<a href="/about">About us</a>
				&bull;
				<a href="/outages">Outages</a>
				&bull;
				<a href="/hp/gogs/issues">Report a problem</a>
				&bull;
				<a href="/assets/librejs/librejs.html" data-jslicense="1">Javascript licenses</a>
				&bull;
				<a href="/fingerprints">SSH Fingerprints</a>



			</div>
			<div class="ui right links">
				
				<div class="ui language bottom floating slide up dropdown link item">
					<i class="world icon"></i>
					<div class="text">English</div>
					<div class="menu">
						
							<a class="item active selected" href="#">English</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=zh-CN">简体中文</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=zh-HK">繁體中文（香港）</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=zh-TW">繁體中文（臺灣）</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=de-DE">Deutsch</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=fr-FR">français</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=nl-NL">Nederlands</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=lv-LV">latviešu</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=ru-RU">русский</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=ja-JP">日本語</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=es-ES">español</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=pt-BR">português do Brasil</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=pl-PL">polski</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=bg-BG">български</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=it-IT">italiano</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=fi-FI">suomi</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=tr-TR">Türkçe</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=cs-CZ">čeština</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=sr-SP">српски</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=sv-SE">svenska</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=ko-KR">한국어</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=gl-ES">galego</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=uk-UA">українська</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=en-GB">English (United Kingdom)</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=hu-HU">Magyar</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=sk-SK">Slovenčina</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=id-ID">Indonesian</a>
						
							<a class="item " href="/diogo/gnu-social/issues/211?lang=fa-IR">Persian</a>
						
					</div>
				</div>



				
			</div>
		</div>
	</footer>
</body>



	<link rel="stylesheet" href="/plugins/highlight-9.6.0/github.css">
	<script src="/plugins/highlight-9.6.0/highlight.pack.js"></script>




	<link rel="stylesheet" href="/plugins/dropzone-4.2.0/dropzone.css">
	<script src="/plugins/dropzone-4.2.0/dropzone.js"></script>

<script src="/js/libs/emojify-1.1.0.min.js"></script>
<script src="/js/libs/clipboard-1.5.9.min.js"></script>
	
</html>

